<!DOCTYPE HTML>
<html>

<head>
	<title>招商加盟</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	<link rel="stylesheet" href="assets/css/main.css" />
	<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />

	<style>
		/*大盒子*/
		.box-lunbo1{
			width: 90%;
			height: 960px;
			background-color: pink;
			position: relative;
			margin-left: 5%;

		}
		.box-lunbo2{
			width: 60%;
			height: 700px;
			background-color: pink;
			position: relative;
			margin-left: 5%;

		}
		/*图片大小*/
		img{
			width: 100%;
			height: 100%;
		}
		/*文本信息*/
		#text{
			width: 700px;
			height: 300px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: left;
			line-height: 40px;
			background-color: #ffffff;
			color:#000000;
			position: absolute;
			left:30%;
			bottom: -15%;
		}
		#text2{
			width: 69.5%;
			height: 900px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: left;
			line-height: 40px;
			background-color: #ffffff;
			color:#000000;
			position: absolute;
			right:-50%;
			bottom: -15%;
			z-index: 1;
		}
		/*左右箭头*/
		#left,#right,#left2,#right2{
			width:60px;
			height: 70px;
			font-size: 20px;
			font-family: 微软雅黑;
			text-align: center;
			line-height: 70px;
			background-color: #ffffff;
			/* opacity: 0.5; */
			color:#04acef;;
		}
		/*定位信息*/
		#left{
			position: absolute;
			top:240px;
			left:0px;
		}
		#right{
			position: absolute;
			top: 240px;
			right:0px;
		}
		#left2{
			position: absolute;
			top:1px;
			right: 163px;
			z-index: 11;
		}
		#right2{
			position: absolute;
			top: 1px;
			right:103px;
			z-index: 11;
		}

		#lunbo2-title{
			padding-left: 25%;
    		margin-top: 85px;
			color: #04acef;
		}
		
	</style>

</head>


<body class="left-sidebar is-preload">
	<div id="page-wrapper">
		<div class="swiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="images/jiamen/body1.png" alt="">
				</div>
			</div>
		</div>

		<!-- Header -->
		<section id="swiper-container">
			<nav id="nav">
				<ul>
					<div id="logo"><img src="images/logo.png" alt=""></div>
					<li class="current"><a href="index.html">Home</a></li>
					<li><a href="left-sidebar.html">Left Sidebar</a></li>
					<li><a href="right-sidebar.html">Right Sidebar</a></li>
					<li><a href="no-sidebar.html">No Sidebar</a></li>
				</ul>
			</nav>
		</section>

		<!-- Main -->
		<section id="main" class="wrapper style2">
			<!-- <div class="title">Left Sidebar</div> -->
			<div class="container">
				<div class="row gtr-150">
					<div class="col-4 col-12-medium">

						<!-- Sidebar -->
						<div id="sidebar">
							<section class="box">
								<header>
									<h2 style="font-size: 30px;">ABOUT</h2>
									<h2 style="font-size: 30px;">US。</h2>
								</header>
								<div>
									<img src="images/jiamen/uspic1.png">
								</div>

								<h2 style="font-size: 26px; padding-top: 25px;">关于我们</h2>

								<div>
									<img src="images/jiamen/uspic2.png">
								</div>
							</section>
						</div>

					</div>
					<div class="col-8 col-12-medium imp-medium">
						<!-- Content -->
						<div id="content">
							<article class="box post">
								<p>米蓝树，不仅是一个家具板材品牌，更是品质生活的代名词。我们始终坚持“源于自然，回归本真”的品牌概念，
									致力于为您打造健康、舒适、时尚的家居环境。选择米蓝树，就是选择品质生活!</p>
								<a href="#" class="image featured">
									<img style="height: 300px;" src="images/pic01.jpg" alt="" />
								</a>
							</article>
						</div>

					</div>
				</div>
			</div>
		</section>

		<!-- Highlights -->
		<section id="highlights" class="wrapper style3">
			<div class="title">JOIN ADVANTAGE</div>
			<div class ="box-lunbo1" id="box-lunbo1">
				<img src="./images/jiamen/lunbo11.png" alt="" id="img1">
				<div>
					<div class="left" id="left"><span><</span></div>
					<div class="right" id="right">></div>
					<div class="text" id="text">
					</div>	
				</div>
			</div>
		</section>

		<section id="highlights" class="wrapper style3">
			<div class ="box-lunbo2" id="box-lunbo2">
				<div style="position: absolute; z-index : 10">
					<img src="./images/jiamen/lunbo21.png" alt="" id="img2">
				</div>
				<div>
					<div class="left2" id="left2"><span><</span></div>
					<div class="right2" id="right2">></div>
					<div class="text2" id="text2"></div>	
				</div>
			</div>
		</section>

		<!-- Footer -->
		<section id="footer" class="wrapper">
			<div class="title">The Rest Of It</div>
			<div class="container">
				<header class="style1">
					<h2>Ipsum sapien elementum portitor?</h2>
					<p>
						Sed turpis tortor, tincidunt sed ornare in metus porttitor mollis nunc in aliquet.<br />
						Nam pharetra laoreet imperdiet volutpat etiam feugiat.
					</p>
				</header>
				<div class="row">
					<div class="col-6 col-12-medium">

						<!-- Contact Form -->
						<section>
							<form method="post" action="#">
								<div class="row gtr-50">
									<div class="col-6 col-12-small">
										<input type="text" name="name" id="contact-name" placeholder="Name" />
									</div>
									<div class="col-6 col-12-small">
										<input type="text" name="email" id="contact-email" placeholder="Email" />
									</div>
									<div class="col-12">
										<textarea name="message" id="contact-message" placeholder="Message"
											rows="4"></textarea>
									</div>
									<div class="col-12">
										<ul class="actions">
											<li><input type="submit" class="style1" value="Send" /></li>
											<li><input type="reset" class="style2" value="Reset" /></li>
										</ul>
									</div>
								</div>
							</form>
						</section>

					</div>
					<div class="col-6 col-12-medium">

						<!-- Contact -->
						<section class="feature-list small">
							<div class="row">
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-home">Mailing Address</h3>
										<p>
											Untitled Corp<br />
											1234 Somewhere Rd<br />
											Nashville, TN 00000
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-comment">Social</h3>
										<p>
											<a href="#">@untitled-corp</a><br />
											<a href="#">linkedin.com/untitled</a><br />
											<a href="#">facebook.com/untitled</a>
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-envelope">Email</h3>
										<p>
											<a href="#">info@untitled.tld</a>
										</p>
									</section>
								</div>
								<div class="col-6 col-12-small">
									<section>
										<h3 class="icon solid fa-phone">Phone</h3>
										<p>
											(000) 555-0000
										</p>
									</section>
								</div>
							</div>
						</section>

					</div>
				</div>
				<div id="copyright">
					<ul>
						<li>&copy; Untitled.</li>
						<li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
					</ul>
				</div>
			</div>
		</section>

	</div>

	<!-- Scripts -->
	<script src="assets/js/jquery.min.js"></script>
	<script src="assets/js/jquery.dropotron.min.js"></script>
	<script src="assets/js/browser.min.js"></script>
	<script src="assets/js/breakpoints.min.js"></script>
	<script src="assets/js/util.js"></script>
	<script src="assets/js/main.js"></script>
	<script src="assets/js/swiper-bundle.min.js"></script>

	<script>
		// 首先获取相关DOM
			var box =document.getElementById('box-lunbo1');
			var img =document.getElementById('img1');
			var left =document.getElementById('left');
			var right =document.getElementById('right');
			
			var box2 =document.getElementById('box-lunbo2');
			var img2 =document.getElementById('img2');
			var left2 =document.getElementById('left2');
			var right2 =document.getElementById('right2');

			// 构造图片和文字数组
			var arr_img = [
				'./images/jiamen/lunbo11.png',
				'./images/jiamen/lunbo12.png',
				'./images/jiamen/lunbo13.png',
				'./images/jiamen/lunbo14.png',
				'./images/jiamen/lunbo15.png',
				'./images/jiamen/lunbo16.png',
			];
			var arr_text =[
			'<div style="font-size: 30px">品质至上</div><div>品质承诺：米蓝树始终将产品品质放在首位，从原材料的选择到生产过程的每一个环节，都经过严格的品质把控，确保每一件产品都达到行业领先水平。</div><div>持续改进：我们不断引进先进技术和设备，提升生产效率和产品质量，以满足市场和消费者的需求。</div>',
			'<div style="font-size: 30px">环保理念</div><div>绿色生产：米蓝树秉承环保理念，采用环保材料和工艺，减少生产过程中的污染和废弃物排放。</div><div>环保责任：我们积极参与环保活动，推广环保知识，提高员工和消费者的环保意识，共同守护地球家园。</div>',
			'<div style="font-size: 30px">创新驱动</div><div>设计创新：米蓝树拥有一支专业的设计团队，紧跟国际潮流趋势，结合国人的审美需求，不断推出新颖、时尚的产品。</div><div>技术创新：我们积极引进和研发新技术，提升产品的性能和品质，保持行业领先地位。</div>',
			'<div style="font-size: 30px">服务为王</div><div>客户至上：米蓝树始终坚持客户至上的服务理念，为消费者提供全方位、个性化的服务。</div><div>服务网络：我们拥有完善的销售网络和售后服务体系，为消费者提供便捷的购买渠道和专业的售后服务。</div>',
			'<div style="font-size: 30px">核心价值观</div><div>诚信务实：米蓝树倡导诚信经营，注重实际效果，用实际行动赢得市场和消费者的信任。</div><div>责任担当：我们积极履行社会责任，关注员工福利，关注社会发展，为社会进步贡献力量。</div>',
			'<div style="font-size: 30px">团队精神</div><div>团结协作：米蓝树注重团队建设和协作精神的培养，鼓励员工之间互相支持、互相帮助、共同成长。</div><div>人才培养：我们为员工提供广阔的发展空间和培训机会，帮助员工提升自身能力和素质，实现个人价值和企业发展的双赢。</div>',
			];
			
			text.innerHTML = arr_text[0];
			// 图片轮播
			var currentIndex =1;
			function slide(){
				img.src = arr_img[currentIndex];
				text.innerHTML =arr_text[currentIndex]
				console.log(currentIndex);
				currentIndex =++currentIndex%6;
			}
			// 使用setInterval完成轮播
			var pause =setInterval(slide,2000);
			// 鼠标悬停时，停止轮播
	        // 使用clearInterval来完成
	        box.addEventListener('mouseover',function(){
	        	clearInterval(pause);

	        });
	        // 鼠标离开后，继续轮播
	        box.addEventListener('mouseout',function(){
	           pause =setInterval(slide,2000);	
	        })
	        // 手动切换图片
	        left.addEventListener('click',function(){
	        	currentIndex = --currentIndex%6;
	        	if(currentIndex < 0){
	        		currentIndex +=5;
	        	}
	        	img.src = arr_img[currentIndex];
		        text.innerHTML = arr_text[currentIndex];
	        })
	        right.addEventListener('click',function(){
	        	currentIndex =++currentIndex%6;
	        	img.src = arr_img[currentIndex];
				text.innerHTML = arr_text[currentIndex];
	        })


			// ------------------
			var arr_img2 = [
				'./images/jiamen/lunbo21.png',
				'./images/jiamen/lunbo22.png',
				'./images/jiamen/lunbo23.png',
				'./images/jiamen/lunbo24.png',
				'./images/jiamen/lunbo25.png',
			];
			var arr_text2 =[
			'<div style="font-size: 30px;padding-left: 25%;padding-right: 50%;margin-top: 90px;color: #04acef;">Strength of the company</div><div style = "padding-left: 25%;margin-top: 25px;padding-right: 27%;">米蓝树拥有占地2万平米的现代化生产基地，实现了从原材料到成品的完整生产流程。</div><div style = "padding-left: 25%;padding-right: 27%;>引进国际先进的生产设备和技术，确保产品的高品质和高效率生产。</div>',
			'<div style="font-size: 30px;padding-left: 25%;padding-right: 50%;margin-top: 90px;color: #04acef;">Strength of the company</div><div style = "padding-left: 25%;margin-top: 25px;padding-right: 27%;">提供多样化的家具板材产品系列，包括但不限于免拉手门板等全屋定制解决方案。</div><div>采用PUR封边技术，工艺质量稳定，提供精板素板等多种选择，满足客户的多样化需求。</div>',
			'<div style="font-size: 30px;padding-left: 25%;padding-right: 50%;margin-top: 90px;color: #04acef;">Strength of the company</div><div style = "padding-left: 25%;margin-top: 25px;padding-right: 27%;">与国内外知名供应商建立长期合作关系，确保原材料的稳定供应和优质品质。</div><div>原材料种类丰富，包括万华禾香、鲁丽、进口巴西博耐克等，为客户提供多样化的选择。</div>',
			'<div style="font-size: 30px;padding-left: 25%;padding-right: 50%;margin-top: 90px;color: #04acef;">Strength of the company</div><div style = "padding-left: 25%;margin-top: 25px;padding-right: 27%;">销售网络遍布全国各大城市，实现全国发货3天直达的快速响应能力。</div><div>提供完善的售前、售中、售后服务体系，确保客户购买无忧。</div>',
			'<div style="font-size: 30px;padding-left: 25%;padding-right: 50%;margin-top: 90px;color: #04acef;">Strength of the company</div><div style = "padding-left: 25%;margin-top: 25px;padding-right: 27%;">拥有一支专业的研发团队，不断研发新产品和新技术，保持行业领先地位。</div><div>与多家高校和研究机构建立合作关系，共同推动家具板材行业的创新发展。</div>',
			];
			var currentIndex2 =1;
			text2.innerHTML = arr_text2[1];
			function slide2(){
				img2.src = arr_img2[currentIndex2];
				text2.innerHTML =arr_text2[currentIndex2]
				currentIndex2 =++currentIndex2%5;
			}
			// 使用setInterval完成轮播
			var pause =setInterval(slide2,2000);
			// 鼠标悬停时，停止轮播
	        // 使用clearInterval来完成
	        box2.addEventListener('mouseover',function(){
	        	clearInterval(pause);
	        });
	        // 鼠标离开后，继续轮播
	        box2.addEventListener('mouseout',function(){
	           pause =setInterval(slide,2000);	
	        })
	        // 手动切换图片
	        left2.addEventListener('click',function(){
				console.log("left2 click")
	        	currentIndex2 = --currentIndex2%5;
	        	if(currentIndex2 < 0){
	        		currentIndex2 +=5;
	        	}
	        	img2.src = arr_img2[currentIndex2];
		        text2.innerHTML = arr_text2[currentIndex2];
	        })
	        right2.addEventListener('click',function(){
				console.log("right2 click")
	        	currentIndex2 =++currentIndex2%5;
	        	img2.src = arr_img2[currentIndex2];
				text2.innerHTML = arr_text2[currentIndex2];
	        })

	</script>


</body>

</html>